<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight"> 行程 </m-top>

    <m-container :top="glTop">
      <view class="pdv40">
        <!--  -->
        <view class="mgt40">
          <panel-title>到达</panel-title>
          <view class="mgt20">
            <m-card padNum="40rpx">
              <view class="font28 c333">交通工具</view>
              <view class="mgt20">
                <view class="font28 c666 mglauto flex align-center cell-group">
                  <view
                    class="cell-check flex align-center"
                    v-for="(item, index) in options"
                    :key="index"
                    @click="vehicleChangeHandler('tmi_come_type', item)"
                  >
                    <view
                      class="radio"
                      :class="{
                        active: state.tmi_come_type === item.value,
                      }"
                    ></view>
                    <view class="label">{{ item.label }}</view>
                  </view>
                </view>
              </view>
              <template v-if="state.tmi_come_type != 69 && state.tmi_come_type">
                <view class="font28 c333 mgt40">{{ state.tmi_come_type == "67" ? "航班号" : "列车号" }}</view>
                <view class="mgt20">
                  <u-input
                    color="#333333"
                    fontSize="28rpx"
                    :border="'none'"
                    placeholder="请输入"
                    v-model="state.tmi_come_number"
                    :customStyle="{
                      'background-color': '#F6F5FA',
                      height: '76rpx',
                      'border-radius': '12rpx',
                      padding: '0 20rpx',
                    }"
                    placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                  ></u-input>
                </view>
              </template>
              <!-- 时间选择 -->
              <view class="font28 c333 mgt40">到达时间</view>
              <view class="mgt20 flex align-center">
                <view class="time-box" @click="timeSelectHandler('tmi_come_time')">{{ comeTimeFormat.left }}</view>
                <view
                  class="time-box"
                  @click="timeSelectHandler('tmi_come_time')"
                  style="flex: 1; margin-right: auto"
                  >{{ comeTimeFormat.right }}</view
                >
              </view>

              <!-- 时间选择 -->
              <view class="font28 c333 mgt40 flex align-center">
                <view class="">是否接站</view>
                <view class="mglauto flex align-center">
                  <view class="cell-check flex align-center">
                    <view
                      class="radio"
                      :class="{
                        active: state.tmi_come_if_reception == 1,
                      }"
                      @click="checkStationHandler(1, 'tmi_come_if_reception')"
                    ></view>
                    <view class="label">是</view>
                  </view>

                  <view class="cell-check flex align-center">
                    <view
                      class="radio"
                      :class="{
                        active: state.tmi_come_if_reception == 0,
                      }"
                      @click="checkStationHandler(0, 'tmi_come_if_reception')"
                    ></view>
                    <view class="label">否</view>
                  </view>
                </view>
              </view>

              <!--  -->
              <view class="font28 c333 mgt40">备注</view>
              <view class="mgt20">
                <u-input
                  color="#333333"
                  fontSize="28rpx"
                  :border="'none'"
                  placeholder="请输入"
                  v-model="state.tmi_come_memo"
                  :customStyle="{
                    'background-color': '#F6F5FA',
                    height: '76rpx',
                    'border-radius': '12rpx',
                    padding: '0 20rpx',
                  }"
                  placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                ></u-input>
              </view>
            </m-card>
          </view>
        </view>

        <!--  -->
        <view class="mgt40">
          <panel-title>离开</panel-title>
          <view class="mgt20">
            <m-card padNum="40rpx">
              <view class="font28 c333">交通工具</view>
              <view class="mgt20">
                <view class="font28 c666 mglauto flex align-center cell-group">
                  <view
                    class="cell-check flex align-center"
                    v-for="(item, index) in options"
                    :key="index"
                    @click="vehicleChangeHandler('tmi_go_type', item)"
                  >
                    <view
                      class="radio"
                      :class="{
                        active: state.tmi_go_type === item.value,
                      }"
                    ></view>
                    <view class="label">{{ item.label }}</view>
                  </view>
                </view>
              </view>
              <template v-if="state.tmi_go_type != 69 && state.tmi_go_type">
                <view class="font28 c333 mgt40">{{ state.tmi_go_type == "67" ? "航班号" : "列车号" }}</view>
                <view class="mgt20">
                  <u-input
                    color="#333333"
                    fontSize="28rpx"
                    :border="'none'"
                    placeholder="请输入"
                    v-model="state.tmi_go_number"
                    :customStyle="{
                      'background-color': '#F6F5FA',
                      height: '76rpx',
                      'border-radius': '12rpx',
                      padding: '0 20rpx',
                    }"
                    placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                  ></u-input>
                </view>
              </template>

              <!-- 时间选择 -->
              <view class="font28 c333 mgt40">离开时间</view>
              <view class="mgt20 flex align-center">
                <view class="time-box" @click="timeSelectHandler('tmi_go_time')">{{ goTimeFormat.left }}</view>
                <view class="time-box" @click="timeSelectHandler('tmi_go_time')" style="flex: 1; margin-right: auto">{{
                  goTimeFormat.right
                }}</view>
              </view>

              <!-- 时间选择 -->
              <view class="font28 c333 mgt40 flex align-center">
                <view class="">是否送站</view>
                <view class="mglauto flex align-center">
                  <view class="cell-check flex align-center">
                    <view
                      class="radio"
                      :class="{
                        active: state.tmi_go_if_reception == 1,
                      }"
                      @click="checkStationHandler(1, 'tmi_go_if_reception')"
                    ></view>
                    <view class="label">是</view>
                  </view>

                  <view class="cell-check flex align-center">
                    <view
                      class="radio"
                      :class="{
                        active: state.tmi_go_if_reception == 0,
                      }"
                      @click="checkStationHandler(0, 'tmi_go_if_reception')"
                    ></view>
                    <view class="label">否</view>
                  </view>
                </view>
              </view>

              <!--  -->
              <view class="font28 c333 mgt40">备注</view>
              <view class="mgt20">
                <u-input
                  color="#333333"
                  fontSize="28rpx"
                  :border="'none'"
                  placeholder="请输入"
                  v-model="state.tmi_go_memo"
                  :customStyle="{
                    'background-color': '#F6F5FA',
                    height: '76rpx',
                    'border-radius': '12rpx',
                    padding: '0 20rpx',
                  }"
                  placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                ></u-input>
              </view>
            </m-card>
          </view>
        </view>
      </view>
    </m-container>

    <m-foot>
      <view class="pdv40" style="padding-bottom: 40rpx">
        <u-button
          type="primary"
          color="#481EC1"
          text="提交"
          @click="submitHandler"
          :customStyle="{
            height: '84rpx',
            'border-radius': '20rpx',
            'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
            'font-size': '32rpx',
          }"
        ></u-button>
      </view>
    </m-foot>

    <!-- 日期选择器 -->
    <u-datetime-picker
      :show="show"
      v-model="dateModel"
      :minDate="minDate"
      mode="datetime"
      :closeOnClickOverlay="true"
      @close="show = false"
      @cancel="show = false"
      @confirm="dateTimeConfirmHandler"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { getDictMapApi } from "@/api/modules/base.js";
import { myTravelEditApi, getTravelListApi } from "@/api/modules/mine.js";
import GlTopMixin from "@/mixins/global-top";
import PanelTitle from "@/pages/index/components/title.vue";
import dayjs from "dayjs";

export default {
  mixins: [GlTopMixin],
  components: {
    PanelTitle,
  },
  data() {
    return {
      noticeState: true,
      startIndex: 0,
      endIndex: 0,
      show: false,
      minDate: dayjs().valueOf(),
      dateModel: "",
      options: [
        {
          label: "动车",
          checked: true,
        },
      ],
      state: {
        tmi_go_if_reception: 0,
        tmi_go_time: "",
        tmi_go_number: "",
        tmi_go_type: "",
        tmi_go_memo: "",

        tmi_come_if_reception: 0,
        tmi_come_number: "",
        tmi_come_memo: "",
        tmi_come_time: "",
        tmi_come_type: "",
      },
    };
  },

  async onLoad() {
    getDictMapApi("07").then((ret) => {
      console.log(ret);
      this.options = ret.map((item, i) => {
        return {
          label: item.twName,
          value: item.twId,
          checked: !i,
        };
      });
    });

    uni.showLoading({
      title: "加载中",
    });
    try {
      const res = await getTravelListApi();
      this.id = res.tmi_id;
      if (res.come) {
        Object.assign(this.state, res.come, {
          tmi_come_time: res.come.tmi_come_time_format,
        });
      }
      if (res.go) {
        Object.assign(this.state, res.go, {
          tmi_go_time: res.go.tmi_go_time_format,
        });
      }
    } catch (error) {}
    uni.hideLoading();
  },

  computed: {
    comeTimeFormat() {
      const time = this.state.tmi_come_time;
      if (!time)
        return {
          left: "年/月/日",
          right: "时分",
        };
      return {
        left: dayjs(time).format("YYYY/MM/DD"),
        right: dayjs(time).format("HH:mm"),
      };
    },

    goTimeFormat() {
      const time = this.state.tmi_go_time;
      if (!time)
        return {
          left: "年/月/日",
          right: "时分",
        };
      return {
        left: dayjs(time).format("YYYY/MM/DD"),
        right: dayjs(time).format("HH:mm"),
      };
    },
  },

  methods: {
    checkStationHandler(val, key) {
      this.$set(this.state, key, val);
    },

    timeSelectHandler(key) {
      this.timeSelectKey = key;
      this.show = true;
    },

    dateTimeConfirmHandler(e) {
      const value = e.value;
      this.$set(this.state, this.timeSelectKey, dayjs(value).format("YYYY/MM/DD HH:mm"));
      this.show = false;
    },

    vehicleChangeHandler(key, item) {
      this.$set(this.state, key, item.value);
    },

    async submitHandler() {
      console.log(!this.state.tmi_come_time && !this.state.tmi_go_time);
      if (!this.state.tmi_come_type || !this.state.tmi_go_type) {
        //
        this.$u.toast("交通工具不能为空");
        return;
      }

      if (!this.state.tmi_come_time || !this.state.tmi_go_time) {
        //
        this.$u.toast("出行时间不能为空");
        return;
      }
      uni.showLoading({
        title: "加载中",
      });
      try {
        await myTravelEditApi({
          ...this.state,
          tmi_id: this.id,
        });
        this.$u.toast("操作成功");
        await this.$u.sleep(3000);
        uni.navigateBack();
      } catch (error) {}
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.cell-group {
  justify-content: space-between;
  padding-right: 14rpx;
}

.cell-check {
  &:not(:first-child) {
    margin-left: 58rpx;
  }

  .label {
    margin-left: 8rpx;
  }

  .radio {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    border-radius: 12rpx;
    border: 2rpx solid #dedede;
  }

  .active {
    border-color: transparent;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      width: 8rpx;
      height: 8rpx;
      border: 8rpx solid #5347ff;
    }
  }
}

.time-box {
  width: 284rpx;
  height: 76rpx;
  background: #f6f5fa;
  border-radius: 12rpx;
  padding-left: 20rpx;
  color: #bbbbbb;
  font-size: 28rpx;
  margin-right: 22rpx;
  line-height: 76rpx;
}
</style>
